<template>
<!-- 点位管理 => 区域管理 -->
  <div>
    <!-- 搜索框 -->
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form :inline="true" >
            <el-form-item label="区域搜索：">
              <el-input
                v-model="reigionName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  <!--  列表-->
    <el-row>
      <el-col :span="24">
        <div class="body">
          <el-button
            icon="el-icon-circle-plus-outline"
            @click="addClickFn()"
            >新建</el-button
          >
          <el-table
            :data="ReigionList.currentPageRecords"
            :header-cell-style="{ background: '#f3f6fb' }"
            style="width: 100%"
          >
            <el-table-column
              fixed
              type="index"
              :index="indexMethod"
              label="序号"
              width="100"
            >
            </el-table-column>
            <el-table-column prop="name" label="区域名称"> </el-table-column>
            <el-table-column prop="nodeCount" label="点位数"> </el-table-column>
            <el-table-column prop="remark" label="备注说明"> </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
              <el-link :underline="false" @click="lookFn(scope.row.id)" type="primary"
                >查看详情</el-link
              >
              <el-link :underline="false" @click="changeFn(scope.row.id)" type="primary"
                >修改</el-link
              >
              <el-link :underline="false" @click="delFn(scope.row.id)" type="danger"
                >删除</el-link
              >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            next-text="下一页"
            prev-text="上一页"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-count="+ReigionList.totalPage"
            layout="total, slot, ->, prev, next"
          >
            <span class="page"
              >共{{ ReigionList.totalCount || 0 }}条记录 第 {{ pageIndex }}/{{
                ReigionList.totalPage
              }}页</span
            >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- form弹框 -->
    <el-dialog :title="arrOpinion === 'add'? '新增区域' : '修改区域'" :visible.sync="dialogFormVisible"  width="630px">
      <el-form  :rules="rules" :model="form">
        <el-form-item label="区域名称：" label-width="120px" prop="text">
          <el-input
            type="text"
            placeholder="请输入"
            v-model="form.regionName"
            maxlength="15"
            show-word-limit
           style=" width:360px"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="备注说明：" label-width="120px" prop="textarea">
          <el-input
            type="textarea"
            placeholder="请输入备注（不超过40字）"
            v-model="form.remark"
            maxlength="30"
            :rows="4"
            show-word-limit
            style=" width:360px"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clickFn()">取 消</el-button>
        <template v-if="arrOpinion === 'change'">
          <el-button type="primary" @click="changeReigionFn()"
          >确 定</el-button>
        </template>
        <template v-if="arrOpinion === 'add'">
        <el-button type="primary" @click="addReigionFn()"
          >确 定</el-button>
        </template>
      </div>
    </el-dialog>
    <!-- table 弹框 查看详情 -->
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible"  width="630px">
      <div class="dialogTop"><span >区域名称：{{name}}</span></div>
      <el-row>
        <el-col class="dialogBottom" :span="5">包含点位：</el-col>
        <el-col :span="19">
        <el-table :data="detailsList.currentPageRecords" :header-cell-style="{ background: '#f3f6fb' }">
          <el-table-column type="index" :index="indexMethod" label="序号" width="80"></el-table-column>
          <el-table-column property="name" label="点位名称"></el-table-column>
          <el-table-column property="vmCount" label="设备数量"></el-table-column>
        </el-table>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { reigionList, addReigion, delReigion, changeReigion, getReigion, getSearch } from '@/api/other'
export default {
  data () {
    return {
      /* 查询条件 */
      reigionName: '',
      /* 当前页 */
      pageIndex: 1,
      /* 当前页数量 */
      pageSize: 10,
      /* 区域数据 */
      ReigionList: {},
      /* 详情数据 */
      detailsList: {},
      name: '',
      /* form弹框 */
      dialogFormVisible: false,
      /* table弹框 */
      dialogTableVisible: false,
      /* 判断是请求类型 */
      arr: ['add', 'change'],
      arrOpinion: '',
      /* form表单数据 */
      form: {
        regionName: '',
        remark: ''
      },
      /* 效验规则 */
      rules: {
        text: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        textarea: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      id: ''
    }
  },
  methods: {
    /* 查询 */
    async onSubmit () {
      // console.log(this.formInline.reigionName)
      await this.axiosFn()
      this.reigionName = ''
    },
    /* --------------------------- */
    /* 分页 */
    handleCurrentChange (val) {
      this.pageIndex = val
      this.axiosFn()
    },
    /* --------------------- */
    async axiosFn () {
      const res = await reigionList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        name: this.reigionName
      })
      // console.log(res)
      this.ReigionList = res
    },
    /* 新增区域 */
    async addReigionFn () {
      this.dialogFormVisible = false
      await addReigion(this.form)
      this.axiosFn()
      this.form.regionName = ''
      this.form.remark = ''
    },
    addClickFn () {
      this.dialogFormVisible = true
      this.arrOpinion = this.arr[0]
      this.form.regionName = ''
      this.form.remark = ''
    },
    /* -------------------------- */
    /* 删除区域 */
    async delFn (id) {
      // console.log(id)
      await delReigion(id)
      this.axiosFn()
    },
    /* -------------------------- */
    /*  查看详情 */
    async lookFn (id) {
      this.dialogTableVisible = true
      const res = await getSearch({ regionId: id })
      // console.log(res)
      this.detailsList = res
      this.name = res.currentPageRecords[0].region.name
    },
    /* ------------------------- */
    /* 修改区域 */
    async changeFn (id) {
      const res = await getReigion(id)
      // console.log(res)
      this.form.regionName = res.name
      this.form.remark = res.remark
      this.dialogFormVisible = true
      this.arrOpinion = this.arr[1]
      this.id = id
    },
    async changeReigionFn () {
      this.dialogFormVisible = false
      await changeReigion(this.id, this.form)
      this.axiosFn()
      this.form.regionName = ''
      this.form.remark = ''
    },
    /* -------------------------- */
    /* 取消按钮 */
    clickFn () {
      this.dialogFormVisible = false
      this.form.regionName = ''
      this.form.remark = ''
    },
    /* -------------------- */
    /* 序号 */
    indexMethod (index) {
      return index + 1 + 10 * (this.pageIndex - 1)
    }
  },
  async created () {
    this.axiosFn()
  }
}
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  display: flex;
  height: 64px;
  align-items: center;
  margin-bottom: 25px;
  padding-left: 17px;

  .el-form-item {
    margin-bottom: 0px;
  }
  .el-button {
    min-width: 80px;
    height: 36px;
    padding: 0;
    background-color: #5f84ff;
    border: none;
  }
  ::v-deep .el-input__inner {
    height: 36px;
  }
}
.body {
  width: 100%;
  background-color: #fff;
  padding-left: 30px;
  padding: 18px 16px;
  ::v-deep .el-table {
    box-sizing: border-box;
    max-width: 100%;
    background-color: #fff;
    font-size: 15px;
    color: #606266;
    border: 0px;
    .el-link--inner {
      margin-right: 10px;
      font-size: 16px;
    }
  }
  .el-button {
    width: 80px;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: none;
    color: #fff;
    margin-bottom: 10px;
  }
  .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
  .page {
    height: 28px;
    line-height: 28px;
    font-size: 15px !important;
    color: #dbdfe5 !important;
    font-weight: 400;
    margin: 25px 10px;
  }
  ::v-deep .btn-next,
  ::v-deep .btn-prev {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
    margin: 20px 14px;
  }
}
/* 弹框 */
::v-deep .el-dialog {
  border-radius: 10px;
  padding: 20px 30px;
}
/* table 弹框 */
.dialogBottom{
  padding-left: 30px;
  font-size: 15px;
}
.dialogTop{
  padding-left: 30px;
  font-size: 15px;
  margin-bottom: 35px;

}
</style>>
